<template>
    <div>
        <nav-bar>
            <template v-slot:left></template>
            <template v-slot:default>地址列表</template>
            <template v-slot:right></template>
        </nav-bar>

        <div class="mydz">
             <van-address-list
                v-model="chosenAddressId"
                :switchable="false"
                :list="list"
                default-tag-text="默认"
                @add="onAdd"
                @edit="onEdit"
                />

        </div>

       
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import {useRouter} from 'vue-router';
import { ref,reactive } from 'vue';
import { Toast } from 'vant';
import {getAddressList} from 'network/address';

export default {
    name:"Address",
    components:{
        NavBar
    },
  setup() {
    const router = useRouter();
    const chosenAddressId = ref('1');
    const list = ref([]);

    getAddressList().then(res=>{
      console.log(res.data);
      list.value = res.data.map(item=>{
        return{
          id:item.id,
          name:item.name,
          tel:item.phone,
          address:`${item.province} ${item.city} ${item.county} ${item.address}`,
          isDefault: !!item.is_default
        }
      })
  
    })
  
    // const disabledList = [
    //   {
    //     id: '3',
    //     name: '王五',
    //     tel: '1320000000',
    //     address: '浙江省杭州市滨江区江南大道 15 号',
    //   },
    // ];

    const onAdd = () => {
        Toast('新增地址');
        router.push({path:'/addressedit',query:{type:'add'}});
    } 
    const onEdit = (item) => {
      Toast('编辑地址:');
      router.push({path:'/addressedit',query:{type:'edit',id:item.id}});
    };

    return {
      list,
      onAdd,
      onEdit,
      chosenAddressId,
    };
  },
};
</script>

<style  lang="scss">
.mydz {
    margin-top: 55px;
}
.van-address-list__add{

    margin-bottom: 65px;
}
.van-button--danger{
  background: var(--color-tint);
}
</style>